<script setup lang="ts">
import { PropType } from "vue";
import { addressType } from "@/types/pages/address";
// 定义i18n
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const props = defineProps({
  address: {
    type: Object as PropType<addressType>,
    default: () => {
      ({});
    },
  },
  hideChange: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <view class="line" v-if="address">
    <image
      style="width: 22px"
      mode="widthFix"
      src="@/static/address.png"
    ></image>
    <view class="cont">
      <view class="top">
        <view class="name">
          {{ address.receiver }}
        </view>
        <view
          class="change"
          v-if="!hideChange"
          @click="$jump('/pages/user/address-book', { chooseFlag: '1' })"
        >
          {{ t("other.change") }}
        </view>
      </view>
      <view class="text">
        {{ address.phone }}
      </view>
      <view class="text">
        {{ address.address }},{{ address.street }},{{ address.area }},{{
          address.city
        }},{{ address.province }} ,{{ address.country }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.line {
  padding: 10px;
  display: flex;
  justify-content: space-between;

  .cont {
    width: calc(100% - 30px);

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 18px;
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0px;

        /* 主题色 */
        color: #303030;
      }

      .change {
        padding: 5px 7px;
        border-radius: 20px;
        /* 纯白 */
        background: #ffffff;

        /* 描边色/描边浅色 */
        border: 1px solid #d8d8d8;

        font-size: 10px;
        font-weight: bold;
        line-height: 10px;
        letter-spacing: 0px;

        font-feature-settings: "kern" on;
        /* 主色系 */
        color: $subject-color;
      }
    }

    .text {
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0px;

      /* 主题色 */
      color: #303030;
      margin-top: 10px;
    }
  }
}
</style>
